<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%@ taglib uri="http://www.springframework.org/tags" prefix="s"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>

<!DOCTYPE html>
<html lang="en">
<head>
<title><s:message code="app.title" /></title>
<%@ include file="Include.jsp"%>
<script type="text/javascript">
	
	$(document).ready(function() {

			renderDependentCombo($("#"+"companyId").val(),'GetBranchListForCompany','branchId','',{
			success:function(branches,flag)
			{
				var branchIds = [];
				for(var i=0;i<branches.length;i++)
				{
					branchIds[i] = branches[i].fieldId; 
				}
				$("#departmentId").chosen();
				$("#branchId").on('change',function(event,params){
					populateDepartmentsForBranches($("#branchId").val());
				});
		 		$("#departmentId").on('change',function(event,params){
		 		});
			}
		});
		$("#firstname").focus();	
	});
	
</script>
</head>
<body>
	<div class="container">
		<%@ include file="Menu.jsp"%>
		<h2><s:message code="userForm.addheader" /></h2>
		<hr>
		<form:form id="cancelForm">
		</form:form>
		<form:form class="form-horizontal" method="post" name="userForm" id="userForm" commandName="userForm"
	           modelAttribute="userForm" >
			
			<table class="table table-bordered">
			<tr>
				<th width="15%"><form:label path="firstname"><s:message code="userForm.firstname" /></form:label></th>
				<td width="*"><form:input path="firstname" cssClass="input-medium" id="firstname" maxlength="40" size="40" tabindex="1" />
				<form:errors cssClass="text-error" path="firstname" />
				</td>
			</tr>
			<tr>
				<th><form:label path="middlename"><s:message code="userForm.middlename" /></form:label></th>
				<td>
					<form:input path="middlename" id="middlename" cssClass="input-medium" maxlength="40" size="40"/>
					<form:errors cssClass="text-error" path="middlename" />
				</td>
			</tr>
			<tr>
				<th><form:label path="lastname"><s:message code="userForm.lastname" /></form:label></th>
				<td><form:input path="lastname" cssClass="input-medium" id="lastname" maxlength="40" size="40" />
					<form:errors cssClass="text-error" path="lastname" />
				</td>
			</tr>
			<tr>
				<th><form:label path="username"><s:message code="userForm.username" /></form:label></th>
				<td>
					<form:input path="username" id="username" cssClass="input-medium" maxlength="40" size="40" />
					<form:errors cssClass="text-error" path="username" />
				</td>
			</tr>
			<tr>
				<th><form:label path="password"><s:message code="userForm.password" /></form:label></th>
				<td>
					<form:password path="password" id="password" cssClass="input-medium" maxlength="40" size="40" />
					<form:errors cssClass="text-error" path="password" />
				</td>
			</tr>
			<tr>
				<th><form:label path="address"><s:message code="userForm.address" /></form:label></th>
				<td><form:textarea path="address" rows="4" cssClass="input-xlarge" id="address" />
					<form:errors cssClass="text-error" path="address" />
				</td>
			</tr>
			<tr>
				<th><form:label path="cellno"><s:message code="userForm.cellno" /></form:label></th>
				<td><form:input path="cellno" cssClass="input-medium" id="cellno" maxlength="10" size="10" />
					<form:errors cssClass="text-error" path="cellno" />
				</td>
			</tr>
			<tr>
				<th><form:label path="teleno"><s:message code="userForm.teleno" /></form:label></th>
				<td><form:input path="teleno" cssClass="input-medium" id="teleno" maxlength="10" size="10" />
					<form:errors cssClass="text-error" path="teleno" />
				</td>
			</tr>
			<tr>
				<th><form:label path="email"><s:message code="userForm.email" /></form:label></th>
				<td>
					<form:input path="email" id="email" cssClass="input-xlarge"/>
					<form:errors cssClass="text-error" path="email" />
				</td>
			</tr>
			
			<tr>
				<th><form:label path="securityQuestionId"><s:message code="userForm.securityQuestionId" /></form:label></th>
				<td>
					<form:select path="securityQuestionId">
						<form:option value="0">-------Select---------</form:option>
						<form:options items="${securityQuestionMasterList}" itemLabel="securityquestion" itemValue="sqid" />
					</form:select>
					<form:errors cssClass="text-error" path="securityQuestionId" />
				</td>
			</tr>
			<tr>
				<th><form:label path="answer"><s:message code="userForm.answer" /></form:label></th>
				<td>
					<form:input path="answer" id="answer" cssClass="input-xlarge"/>
					<form:errors cssClass="text-error" path="answer" />
				</td>
			</tr>
			<tr>
				<th><form:label path="userGroupId"><s:message code="userForm.userGroupId" /></form:label></th>
				<td>
					<form:select path="userGroupId" cssClass="input-medium" >
						<form:options items="${userGroupList}" itemLabel="groupname" itemValue="usergroupid" />
					</form:select>
					<form:errors cssClass="text-error" path="userGroupId" />
				</td>
			</tr>
			<tr>
				<th><form:label path="companyId"><s:message code="userForm.companyId" /></form:label></th>
				<td>
					<form:select path="companyId" cssClass="input-medium" id="companyId" onchange="renderDependentCombo(this.value,'GetBranchListForCompany','branchId','branchId');" >
						<form:options items="${companyList}" itemLabel="companyname" itemValue="companyid" />
					</form:select>
					<form:errors cssClass="text-error" path="companyId" />
				</td>
			</tr>
			<tr>
				<th><form:label path="branchId"><s:message code="userForm.branchId" /></form:label></th>
				<td>
					<form:select path="branchId" cssClass="input-xlarge" style="width:300px;" id="branchId" multiple="true" data-placeholder="Choose branches..." >
						<%-- <form:options items="${branchList}" itemLabel="branchname" itemValue="branchid" /> --%>
					</form:select>
					<form:errors cssClass="text-error" path="branchId" />
				</td>
			</tr>
			<tr>
				<th><form:label path="departmentId"><s:message code="userForm.departmentId" /></form:label></th>
				<td>
					<form:select path="departmentId" cssClass="input-xlarge" style="width:300px;" id="departmentId" multiple="true" data-placeholder="Choose departmentes..." >
						<%-- <form:options items="${departmentList}" itemLabel="departmentname" itemValue="departmentid" /> --%>
					</form:select>
					<form:errors cssClass="text-error" path="departmentId" />
				</td>
			</tr>
		</table>
		<br>
			<button class="btn btn-primary" type="submit" formaction="AddUser"><s:message code="app.add" /></button>
			<button class="btn" type="submit" formaction="ListUser" form="cancelForm" formmethod="get"><s:message code="app.cancel" /></button>
		</form:form>
		 <%@ include file="Footer.jsp"%>
	</div>
</body>
</html>